<template>
  <el-container class="el-container--privilege">
    <el-aside width="200px">
      <el-row>
        <el-col :span="23">
          <el-input v-model="menuName" @change="filterChange" clearable :placeholder="$t('search')+'角色，回车确定'"></el-input>
        </el-col>
      </el-row>
      <el-tree @check="treeCheck" @node-click="menuListTreeNodeclick" :data="menuList" :props="defaultTreeProps"
        :expand-on-click-node="false" node-key="id" ref="menuListTree" accordion :show-checkbox="false" check-strictly
        :filter-node-method="filterNode">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <i v-if="data.isImportant === '1'" class="el-icon-star-on" style="color: red"></i>
        </span>
      </el-tree>
    </el-aside>
    <el-container>
      <el-main>
        <vxe-table :loading="dataListLoading" :data="dataList" highlight-current-row ref="xTable" auto-resize
          remote-sort @sort-change="dataListSortChangeHandle" class="vxe-table-element">
          <vxe-table-column type="index" width="50" fixed="left" align="center"></vxe-table-column>
          <vxe-table-column field="username" title="user.username" sortable>
            <template slot-scope="scope">
              <span>{{ scope.row.realName }}({{ scope.row.username }})</span>
              <i v-if="scope.row.superAdmin.toString() == '2'" class="icon_user_admin">
                <el-tag type="success" size="mini" effect="dark">管理员</el-tag>
              </i>
              <i v-if="scope.row.superAdmin.toString() == '1'" class="el-icon-bell icon_user_admin">
              </i>
            </template>
          </vxe-table-column>
          <vxe-table-column field="deptId" title="user.deptName" sortable align="center">
            <template slot-scope="scope" align="center">
              <span>{{ scope.row.deptName }}</span>
            </template>
          </vxe-table-column>
          <vxe-table-column field="mobile" title="user.mobile" width="120" align="center"></vxe-table-column>
          <vxe-table-column field="status" title="user.status" width="80" align="center">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.status === 0" size="small" type="danger">{{ $t('user.status0') }}</el-tag>
              <el-tag v-else size="small" type="success">{{ $t('user.status1') }}</el-tag>
            </template>
          </vxe-table-column>
          <vxe-table-column field="createDate" title="user.createDate" sortable width="140" align="center">
          </vxe-table-column>
        </vxe-table>
        <el-pagination :current-page="page" :page-sizes="[5, 10, 20, 50, 100]" :page-size="limit" :total="total"
          layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
          @current-change="pageCurrentChangeHandle">
        </el-pagination>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import mixinViewModule from '@/mixins/view-module'
import { isEmpty } from '@/utils/validate'
export default {
  mixins: [mixinViewModule],
  data () {
    return {
      mixinViewModuleOptions: {
        getDataListURL: '/sys/user/page',
        getDataListIsPage: true,
        exportURL: '/sys/user/export'
      },
      defaultTreeProps: {
        label: 'name',
        children: 'children'
      },
      activeName: '1',
      menuName: '',
      deptListVisible: false,
      dataForm: {
        menuIds: this.getMenuIdsInit(),
        username: '',
        deptId: '',
        deptName: ''
      },
      popUserNameVisible: false,
      popDeptNameVisible: false,
      renderUserName: false,
      renderDeptName: false
    }
  },
  props: {
    menuList: {
      type: Array,
      required: true
    },
    deptList: {
      type: Array,
      required: true
    }
  },
  watch: {
    // tabs 点击
    'activeName': function (val) {
      if (val === '2') {
        this.$emit('showPrivilegeAudit', val)
      }
    }
  },
  created () {
    this.init()
  },
  methods: {
    getMenuIdsInit () {
      return '_NO_DATA_'
    },
    init () {
      this.$nextTick(() => {
        Promise.all([
        ]).then(() => {
        })
      })
    },
    // 树 选中节点
    treeCheck () {
      this.dataForm.menuIds = [
        ...this.$refs.menuListTree.getCheckedKeys(),
        ...this.$refs.menuListTree.getHalfCheckedKeys()
      ].join(',')
      if (isEmpty(this.dataForm.menuIds)) {
        this.dataForm.menuIds = this.getMenuIdsInit()
      }
      this.getDataList()
    },
    menuListTreeNodeclick (val) {
      this.dataForm.menuIds = val.id
      this.getDataList()
    },
    filterNode: function (value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    },
    filterChange: function () {
      // 这里每当输入的数据有变化就触发原生的过滤节点这个函数
      this.$refs.menuListTree.filter(this.menuName)
    }
  }
}
</script>
<style scoped>
.el-tag--mini {
  margin: 0 2px;
  padding: 0 2px;
  font-size: 10px;
  height: 18px;
  line-height: 18px;
}
</style>
